<template>
  <div :class="$style.wrap">
    <ContentWrap>
      <FormContainer :column="4">
        <el-form ref="form" :model="formData" :rules="formRules" label-width="100px">
          <el-form-item prop="officeName" label="办事处">
            <el-input v-model.trim="formData.officeName" placeholder="请输入办事处" clearable></el-input>
          </el-form-item>
          <el-form-item prop="contactPersonName" label="售后联系人">
            <el-input v-model.trim="formData.contactPersonName" placeholder="请输入售后联系人" clearable></el-input>
          </el-form-item>
          <el-form-item prop="contactPhone" label="售后联系人电话">
            <el-input v-model.trim="formData.contactPhone" number placeholder="请输入售后联系人电话" clearable></el-input>
          </el-form-item>
          <el-form-item>
            <Button @click="resetForm">重置</Button>
            <Button type="primary" enter @click="queryHandle">查询</Button>
          </el-form-item>
        </el-form>
      </FormContainer>
      <table-box ref="table" no-request :other-filters="filtersRaw" :table-config="tableConfig"></table-box>
    </ContentWrap>
  </div>
</template>
<script>
import ContentWrap from '@/components/ContentWrap'
import FormContainer from '@/components/FormContainer'
import Edit from './components/edit'
import { filtersRaw } from '@/utils'
export default {
  name: 'OfficeArchive',
  components: {
    ContentWrap,
    FormContainer
  },
  data() {
    return {
      formData: {
        office: '',
        contactPersonName: '',
        contactPhone: ''
      },
      formRules: {},
      filtersRaw: [],
      // 表格配置
      tableConfig: {
        interfacePath: '/call-center/api/v1/officeAfterSaleArchive/page',
        hideFuncBar: true,
        tabIndex: 1,
        sort: 'createTime',
        order: 'desc',
        // 表格字段动态配置
        setting: [
          {
            label: '序号',
            width: '80',
            align: 'center',
            formatData: v => v.keyIndex + 1
          },
          {
            label: '办事处',
            width: 130,
            prop: 'officeName'
          },
          {
            label: '售后联系电话',
            width: 100,
            prop: 'afterSaleCall'
          },
          {
            label: '售后联系人',
            width: 120,
            prop: 'contactPersonName'
          },
          {
            label: '售后联系人QUP账号',
            width: 100,
            prop: 'accountNo'
          },
          {
            label: '售后联系人电话',
            width: 140,
            prop: 'contactPhone'
          },
          {
            label: '备注',
            prop: 'remark'
          },
          {
            label: '操作',
            width: 100,
            align: 'center',
            overflowHidden: false,
            render: (h, row) => {
              return <Edit row={row} onRefresh={this.refresh}></Edit>
            }
          }
        ]
      }
    }
  },
  methods: {
    resetForm() {
      this.$refs.form.resetFields()
    },
    // 刷新表格数据
    refresh() {
      const t = []
      for (const key of Object.keys(this.formData)) {
        const v = this.formData[key]
        if (v === '') {
          continue
        }
        t.push(filtersRaw(key, v, 'like'))
      }
      this.filtersRaw = t
      this.$nextTick(() => {
        this.$refs.table.initTableData()
      })
    },
    // 查询
    queryHandle() {
      this.refresh()
    }
  }
}
</script>
<style lang='scss' module>
.wrap{

}
</style>
